<template>
    <div class="common-layout">
      <el-container>
        <el-header style="height: 80px">
          <TheHeader></TheHeader>
        </el-header>

        <el-container>
          <el-aside>
            <TheSider></TheSider>
          </el-aside>

        <el-container>

          <el-main>
            <router-view></router-view>
          </el-main>
<!--          <el-footer>-->
<!--            <TheFooter></TheFooter>-->
<!--          </el-footer>-->

        </el-container>
        </el-container>
      </el-container>
    </div>





</template>
<script>
import { defineComponent } from 'vue';
import TheSider from "@/components/the-sider";
import TheHeader from "@/components/the-header";
export default defineComponent({
  name:'app',
  components:{
    TheHeader,
    TheSider,
    // TheHeader,
  }
    // return {
    // }
})
</script>
<style>


.el-header {
  background-color: #5c8fc4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  font-family:fantasy;
  font-size: 30px;
  font-weight: bold;
  color:white;
}
</style>